<script lang="ts">
import { findIndex } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import { showModal } from '@/utils'

import { getIntelligenceApi } from './service'

@Component({
  name: 'Intelligence'
})
export default class Intelligence extends Vue {
  onLoad() {
    this.getData()
  }
  list: Recordable = {}
  async getData() {
    const { data } = await getIntelligenceApi()
    this.list = data
  }
  expandIds: Array<any> = []
  handleExpand(id: string) {
    const index = findIndex(this.expandIds, (i) => i === id)
    if (index >= 0) {
      this.expandIds.splice(+index, 1)
      return
    }
    this.expandIds.push(id)
  }
  async handle2Del({ _id }: any) {
    console.log(' handle2Del', _id)
    const { confirm } = await showModal({ content: '确定删除吗？' })
    const db: any = wx.cloud.database()
    confirm && (await db.collection('user').where({ _id }).remove())
    this.getData()
  }
}
</script>

<template>
  <view class="p-20rpx">
    <view v-if="list.length">
      <view
        v-for="i in list"
        :key="i._id"
        style="transition: 300ms"
        :class="
          (expandIds.includes(i._id) ? 'h-630rpx' : 'h-78rpx') +
          ' p-20rpx overflow-hidden mb-20rpx bg-white rounded-10rpx'
        "
      >
        <view
          class="flex justify-between items-center"
          @click="handleExpand(i._id)"
        >
          <text class="text-first text-base">{{ i.name }}</text>
          <view class="text-first text-base flex items-center">
            {{ i.createTime }}
            <u-icon
              :name="expandIds.includes(i._id) ? 'arrow-up' : 'arrow-down'"
              color="#666"
              size="12"
            ></u-icon>
          </view>
        </view>
        <view class="text-first text-base py-10rpx">
          <view>
            <text>涉事人姓名：</text>
            {{ i.name }}
          </view>
        </view>
        <view class="text-first text-base py-10rpx">
          <text>涉事人员身份证：</text>
          {{ i.idCard }}
        </view>
        <view class="text-first text-base py-10rpx">
          <text>事故类型：</text>
          {{ i.type }}
        </view>
        <view class="text-first text-base py-10rpx">
          <text>发生时间：</text>
          {{ i.time }}
        </view>
        <view class="text-first text-base py-10rpx">
          <view>事故描述：</view>
          <view class="h-200rpx overflow-auto">
            {{ i.desc }}
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      margin-top="36%"
      icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
      text="暂无数据"
    />
  </view>
</template>

<style scoped lang="scss"></style>
